<template>
  <div class="large-screen">
    <!-- 地图 -->
    <mapScene @hideTabel="hideTabel" @showTable="showTable" @getProvinceBox="getProvinceBox" @showBox="showBox" ref="mapSceneRef"></mapScene>
    <div class="large-screen-wrap" id="large-screen">
      <m-header title="数智财投驾驶舱" sub-text="">
        
      </m-header>
      <!-- 顶部菜单 -->
      <div class="top-menu">
        <!-- 顶部统计卡片 -->
        <div class="top-count-card">
          <mCountCard v-for="(item, index) in state.totalView" :info="item" :key="index" @hideTabel="hideTabel" @showTable="showTable" :isNeedClick="true"></mCountCard>
        </div>
        
      </div>
      
      <!-- 左边布局 图表 -->
      <div class="left-wrap">
        <div class="left-wrap-3d">
          <!-- 大宗商品销售额 -->
          <BulkCommoditySalesChart @hideTabel="hideTabel" @showTable="showTable"></BulkCommoditySalesChart>
          <!-- 年度经济增长点 -->
          <YearlyEconomyTrend @hideTabel="hideTabel" @showTable="showTable"></YearlyEconomyTrend>
          
        </div>
      </div>
      <!-- 右边布局 图表 -->
      <div class="right-wrap">
        <div class="right-wrap-3d">
          <!-- 风险检测 -->
          <PurposeSpecialFunds> </PurposeSpecialFunds>
          <!-- 合规建设 -->
          <ProportionPopulationConsumption></ProportionPopulationConsumption>
          <!-- 员工基本情况 -->
          <ElectricityUsage></ElectricityUsage>
        </div>
      </div>
      <!-- 底部托盘 -->
      <div class="bottom-tray">
        
        <div class="bottom-menu">
          <div class="bottom-menu-item is-active" style="margin-right: 112px;">
            <div class="bottom-menu-item-value">72.52<span style="margin-left: 6px;" class="bottom-menu-item-unit">亿元</span></div>
            <div class="bottom-menu-item-label">本年累计收益</div>
          </div>
          <div class="bottom-menu-item" style="margin-right: 112px;">
            <div class="bottom-menu-item-value">24.54<span style="margin-left: 6px;" class="bottom-menu-item-unit">亿元</span></div>
            <div class="bottom-menu-item-label">本年累计费用</div>
          </div>
          <div class="bottom-menu-item">
            <div class="bottom-menu-item-value">52.05<span style="margin-left: 6px;" class="bottom-menu-item-unit">亿元</span></div>
            <div class="bottom-menu-item-label">本年累计净利润</div>
          </div>
          
        </div>
       
      </div>
      

      <div class="pos_canvas_box" id="pos_canvas_box" :style="{opacity:`${boxOpacity}`}">
        <div class="pos_canvas_box_item" v-for="(item,index) in box_arr" :key="index">
          <div class="pos_canvas_box_item-label">{{item.label}}</div>
          <div class="pos_canvas_box_item-value">
            {{item.value}}
            <span class="pos_canvas_box_item-unit">{{item.unit}}</span>
          </div>

        </div>
      </div>


      <div class="pos_card_content" v-if="isCardVisible">
        <div class="pos_card_content_table">
          <div class="table_title">
            <div>{{state.tableTitle}}</div>
            <div @click="hideTabel" class="close"><el-icon><CircleClose size="14px" style="color: #ffffff;"/></el-icon></div>
          </div>
          <div class="dl_table_container table_container">
            <div class="table_tabs">
              <div v-for="(item,index) in state.headerData" :key="index" @click="changeTabs(index)" :class="state.isStaticsKet===index?'table_tabs_item table_tabs_item-avtive':'table_tabs_item'">
                {{item.label}}
                <span>({{item.total}})</span>
              </div>
              
            </div>
            <el-table stripe :header-cell-style="{ background: '#335CAB', color: 'white',height: '50px' }" :data="state.tableData" style="width: 100%">
              <el-table-column v-for="(val,key) in state.columnData" :key="'key'+key" :prop="val.index" :label="val.label" :width="val.width?val.width:'auto'" />
            </el-table>
            <div class="paginationClass">
              <el-pagination background layout="prev, pager, next" :total="1000" @change="changePage" />
            </div>
            
          </div>
          
        </div>
      </div>
      
    </div>

    <!-- loading动画 -->
    <div class="loading">
      <div class="loading-text">
        <span style="--index: 1">L</span>
        <span style="--index: 2">O</span>
        <span style="--index: 3">A</span>
        <span style="--index: 4">D</span>
        <span style="--index: 5">I</span>
        <span style="--index: 6">N</span>
        <span style="--index: 7">G</span>
      </div>
      <div class="loading-progress">
        <span class="value">{{ state.progress }}</span>
        <span class="unit">%</span>
      </div>
    </div>
    
    
  </div>
</template>
<script setup>
import { shallowRef, ref, reactive, onMounted, onBeforeUnmount } from "vue"
import { CircleClose } from '@element-plus/icons-vue'
import mapScene from "./map.vue"
import mHeader from "@/components/mHeader/index.vue"
import mCountCard from "@/components/mCountCard/index.vue"
import mMenu from "@/components/mMenu/index.vue"
import mRadar from "@/components/mRadar/index.vue"
import mMenuItem from "@/components/mMenuItem/index.vue"
import mSvglineAnimation from "@/components/mSvglineAnimation/index.vue"
import BulkCommoditySalesChart from "./components/BulkCommoditySalesChart.vue"
import YearlyEconomyTrend from "./components/YearlyEconomyTrend.vue"
import EconomicTrendChart from "./components/EconomicTrendChart.vue"
import DistrictEconomicIncome from "./components/DistrictEconomicIncome.vue"
import PurposeSpecialFunds from "./components/PurposeSpecialFunds.vue"
import ProportionPopulationConsumption from "./components/ProportionPopulationConsumption.vue"
import ElectricityUsage from "./components/ElectricityUsage.vue"
import QuarterlyGrowthSituation from "./components/QuarterlyGrowthSituation.vue"
import { Assets } from "./assets.js"
import emitter from "@/utils/emitter"
import gsap from "gsap"
import autofit from "autofit.js"
import xiangmushuliang from '@/assets/images/xiangmushuliang.png'
import chanyelianguimo from '@/assets/images/chanyelianguimo.png'
import jingjiguimo from '@/assets/images/jingjiguimo.png'
const boxOpacity = ref(0)
const box_arr = ref([
  {
    label:"地区",
    value:"江西省",
    unit:''
  },
  {
    label:"在投项目数量",
    value:"251",
    unit:'个'
    
  },
  {
    label:"在投项目规模",
    value:"21.54",
    unit:'亿元'
  },
  {
    label:"在投项目累计收益",
    value:"258.65",
    unit:'亿元'
  }
])
const isCardVisible = ref(false)
const assets = shallowRef(null)
const mapSceneRef = ref(null)
const getProvinceBox = (provincesData,provinceName)=>{
  // roundI.value++
  // if(roundI.value === provincesData.length){
  //   roundI.value = 0

  // }
  let currentData = provincesData.filter(obj=>obj.name === provinceName)
  if(currentData.length<=0){
    return 
  }
  box_arr.value = [
    {
      label:"地区",
      value:currentData[0].name,
      unit:''
    },
    {
      label:"在投项目数量",
      value:currentData[0].count,
      unit:'个'
      
    },
    {
      label:"在投项目规模",
      value:currentData[0].model,
      unit:'亿元'
    },
    {
      label:"在投项目累计收益",
      value:currentData[0].totalAmount,
      unit:'亿元'
    }
  ]
 
}
const showBox = (data) => {
  boxOpacity.value = data
}
const state = reactive({
  isStaticsKet:0,
  statics:{
    total:100,
    industry:60,
    fund:10,
    isc:10,
    loan:10,
    insurance:10
  },
  tableTitle:"在投项目清单",
  headerData:[
    {
      label:"全部",
      value:0,
      total:10
    },
    {
      label:"实业",
      value:1,
      total:20
    },
    {
      label:"基金",
      value:2,
      total:30
    },
    {
      label:"供应链",
      value:3,
      total:40
    },
    {
      label:"小贷",
      value:4,
      total:50
    },
    {
      label:"保理",
      value:5,
      total:60
    },
    
  ],
  columnData:[
    {
      index:'name',
      label:'项目名称',
      width:'180'

    },
    {
      index:'projectType',
      label:'项目类型',
      width:'180'

    },
    {
      index:'businessType',
      label:'业务类型',


    },
    {
      index:'customName',
      label:'客户名称',


    },
    {
      index:'address',
      label:'所在地区',
 

    },
    {
      index:'projectModel',
      label:'项目规模(万元)',


    },
    {
      index:'income',
      label:'累计收益(万元)',


    },
    {
      index:'startTime',
      label:'开始时间',


    },
  ],
  tableData:[
    {
      name:"测试项目名称1",
      projectType:"实业",
      businessType:"债权类",
      customName:"张三",
      address:"江西南昌高新区",
      projectModel:"800",
      income:"800",
      startTime:"2025-05-08"
    },
    {
      name:"测试项目名称2",
      projectType:"基金",
      businessType:"债权类",
      customName:"张三",
      address:"江西南昌高新区",
      projectModel:"800",
      income:"800",
      startTime:"2025-05-08"

    },
    {
      name:"测试项目名称3",
      projectType:"供应链",
      businessType:"债权类",
      customName:"张三",
      address:"江西南昌高新区",
      projectModel:"800",
      income:"800",
      startTime:"2025-05-08"

    },
    {
      name:"测试项目名称2",
      projectType:"小贷",
      businessType:"债权类",
      customName:"张三",
      address:"江西南昌高新区",
      projectModel:"800",
      income:"800",
      startTime:"2025-05-08"

    },
    {
      name:"测试项目名称3",
      projectType:"保理",
      businessType:"债权类",
      customName:"张三",
      address:"江西南昌高新区",
      projectModel:"800",
      income:"800",
      startTime:"2025-05-08"

    }
  ],
  // 进度
  progress: 0,
  // 当前顶部导航索引
  activeIndex: "1",
  // 卡片统计数据
  totalView: [
    {
      icon: xiangmushuliang,
      zh: "745",
      en: "供应链金融支持实体经济项目数量",
      value: 31500,
      unit: "个",
      type:"img"
    },
    {
      icon: chanyelianguimo,
      zh: "54.85",
      en: "供应链金融支持实体经济规模",
      value: 15000,
      unit: "亿元",
      type:"img"
    },
    {
      icon: jingjiguimo,
      zh: "94.51",
      en: "供应链金融支持我省重点产业链规模",
      value: 15000,
      unit: "亿元",
      type:"img"
    },
  ],
})
const changePage = (currentPage,pageSize)=>{
  console.log(currentPage)
  console.log(pageSize)
}
const changeTabs = (val)=>{
  state.isStaticsKet = val
}
const setTableData = (data)=>{
  if(data===0){
    state.tableTitle ="在投项目清单"
    state.headerData = [
      {
        label:"全部",
        value:0,
        total:10
      },
      {
        label:"实业",
        value:1,
        total:20
      },
      {
        label:"基金",
        value:2,
        total:30
      },
      {
        label:"供应链",
        value:3,
        total:40
      },
      {
        label:"小贷",
        value:4,
        total:50
      },
      {
        label:"保理",
        value:5,
        total:60
      },
      
    ]
    state.columnData=[
      {
        index:'name',
        label:'项目名称',
        width:'180'

      },
      {
        index:'projectType',
        label:'项目类型',
        width:'180'

      },
      {
        index:'businessType',
        label:'业务类型',


      },
      {
        index:'customName',
        label:'客户名称',


      },
      {
        index:'address',
        label:'所在地区',
  

      },
      {
        index:'projectModel',
        label:'项目规模(万元)',


      },
      {
        index:'income',
        label:'累计收益(万元)',


      },
      {
        index:'startTime',
        label:'开始时间',


      },
    ]
    state.tableData=[
      {
        name:"测试项目名称1",
        projectType:"实业",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08"
      },
      {
        name:"测试项目名称2",
        projectType:"基金",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08"

      },
      {
        name:"测试项目名称3",
        projectType:"供应链",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08"

      },
      {
        name:"测试项目名称2",
        projectType:"小贷",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08"

      },
      {
        name:"测试项目名称3",
        projectType:"保理",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08"

      }
    ]
  }else if(data === 1){
    state.tableTitle ="财投链项目清单"
    state.headerData = [
      {
        label:"全部",
        value:0,
        total:100
      },
      {
        label:"供应链",
        value:1,
        total:20
      },
      {
        label:"小贷",
        value:2,
        total:40
      },
      {
        label:"保理",
        value:3,
        total:40
      },
      
    ]
    state.columnData=[
      {
        index:'name',
        label:'项目名称',
        width:'180'

      },
      {
        index:'projectType',
        label:'项目类型',

      },
      {
        index:'projectStatus',
        label:'项目状态',

      },
      {
        index:'customName',
        label:'客户名称',


      },
      {
        index:'address',
        label:'所在地区',
  

      },
      {
        index:'projectModel',
        label:'项目规模(万元)',


      },
      {
        index:'launchTotal',
        label:'累计投放金额(万元)',


      },
      {
        index:'launchYear',
        label:'本年投放金额(万元)',


      },
      {
        index:'income',
        label:'累计收益(万元)',


      },
      {
        index:'balance',
        label:'业务余额(万元)',


      },
      {
        index:'startTime',
        label:'开始时间',


      },
    ]
    state.tableData=[
      {
        name:"测试项目名称1",
        projectType:"实业",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"基金",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"供应链",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"小贷",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"保理",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      }
    ]
  }else if(data === 2){
    state.tableTitle ="供应链金融支持实体经济项目清单"
    state.headerData = [
      {
        label:"全部",
        value:0,
        total:100
      },
      {
        label:"供应链",
        value:1,
        total:20
      },
      {
        label:"小贷",
        value:2,
        total:40
      },
      {
        label:"保理",
        value:3,
        total:40
      },
      
    ]
    state.columnData=[
      {
        index:'name',
        label:'项目名称',

      },
      {
        index:'projectType',
        label:'项目类型',

      },
      {
        index:'projectStatus',
        label:'项目状态',

      },
      {
        index:'customName',
        label:'客户名称',


      },
      {
        index:'address',
        label:'所在地区',
  

      },
      {
        index:'projectModel',
        label:'项目规模(万元)',


      },
      {
        index:'launchTotal',
        label:'累计投放金额(万元)',


      },
      {
        index:'launchYear',
        label:'本年投放金额(万元)',


      },
      {
        index:'income',
        label:'累计收益(万元)',


      },
      {
        index:'balance',
        label:'业务余额(万元)',


      },
      {
        index:'startTime',
        label:'开始时间',


      },
    ]
    state.tableData=[
      {
        name:"测试项目名称1",
        projectType:"实业",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"基金",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"供应链",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"小贷",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"保理",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      }
    ]
  }else if(data === 3){
    state.tableTitle ="供应链金融支持我省重点产业链项目清单"
    state.headerData = [
      {
        label:"全部",
        value:0,
        total:100
      },
      {
        label:"供应链",
        value:1,
        total:20
      },
      {
        label:"小贷",
        value:2,
        total:40
      },
      {
        label:"保理",
        value:3,
        total:40
      },
      
    ]
    state.columnData=[
      {
        index:'name',
        label:'项目名称',
        width:'180'

      },
      {
        index:'projectType',
        label:'项目类型',

      },
      {
        index:'projectStatus',
        label:'项目状态',

      },
      {
        index:'customName',
        label:'客户名称',


      },
      {
        index:'address',
        label:'所在地区',
  

      },
      {
        index:'projectModel',
        label:'项目规模(万元)',


      },
      {
        index:'launchTotal',
        label:'累计投放金额(万元)',


      },
      {
        index:'launchYear',
        label:'本年投放金额(万元)',


      },
      {
        index:'income',
        label:'累计收益(万元)',


      },
      {
        index:'balance',
        label:'业务余额(万元)',


      },
      {
        index:'startTime',
        label:'开始时间',


      },
    ]
    state.tableData=[
      {
        name:"测试项目名称1",
        projectType:"实业",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"基金",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"供应链",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"小贷",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"保理",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      }
    ]
  }else if(data === 4){
    state.tableTitle ="在投项目清单"
    state.headerData = [
      {
        label:"全部",
        value:0,
        total:100
      },
      {
        label:"供应链",
        value:1,
        total:20
      },
      {
        label:"小贷",
        value:2,
        total:40
      },
      {
        label:"保理",
        value:3,
        total:40
      },
      
    ]
    state.columnData=[
      {
        index:'name',
        label:'项目名称',
        width:'180'

      },
      {
        index:'projectType',
        label:'项目类型',

      },
      {
        index:'projectStatus',
        label:'项目状态',

      },
      {
        index:'customName',
        label:'客户名称',


      },
      {
        index:'address',
        label:'所在地区',
  

      },
      {
        index:'projectModel',
        label:'项目规模(万元)',


      },
      {
        index:'launchTotal',
        label:'累计投放金额(万元)',


      },
      {
        index:'launchYear',
        label:'本年投放金额(万元)',


      },
      {
        index:'income',
        label:'累计收益(万元)',


      },
      {
        index:'balance',
        label:'业务余额(万元)',


      },
      {
        index:'startTime',
        label:'开始时间',


      },
    ]
    state.tableData=[
      {
        name:"测试项目名称1",
        projectType:"实业",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"基金",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"供应链",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称2",
        projectType:"小贷",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      },
      {
        name:"测试项目名称3",
        projectType:"保理",
        businessType:"债权类",
        customName:"张三",
        address:"江西南昌高新区",
        projectModel:"800",
        income:"800",
        startTime:"2025-05-08",
        launchTotal:"9999.99",
        launchYear:"9999.99",
        balance:"9999.99"

      }
    ]
  }
}
const showTable = (data)=>{
  /**
   * data
   * 0 在投项目
   * 1 财投链
   * 2 供应链金融支持实体
   */
  console.log(data)
  setTableData(data)
  isCardVisible.value = true
}
const hideTabel = (data)=>{
  console.log(data)
  isCardVisible.value = false
}
onMounted(() => {
  // 监听地图播放完成，执行事件
  emitter.$on("mapPlayComplete", handleMapPlayComplete)
  // 自动适配
  assets.value = autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#large-screen",
    resize: true,
  })
  // 初始化资源
  initAssets(async () => {
    // 加载地图
    emitter.$emit("loadMap", assets.value)
    // 隐藏loading
    await hideLoading()
    // 播放场景
    // mapSceneRef.value.play()
  })
})
onBeforeUnmount(() => {
  emitter.$off("mapPlayComplete", handleMapPlayComplete)
})
// 初始化加载资源
function initAssets(onLoadCallback) {
  assets.value = new Assets()
  // 资源加载进度
  let params = {
    progress: 0,
  }
  assets.value.instance.on("onProgress", (path, itemsLoaded, itemsTotal) => {
    let p = Math.floor((itemsLoaded / itemsTotal) * 100)
    gsap.to(params, {
      progress: p,
      onUpdate: () => {
        state.progress = Math.floor(params.progress)
      },
    })
  })
  // 资源加载完成
  assets.value.instance.on("onLoad", () => {
    onLoadCallback && onLoadCallback()
  })
}

// 隐藏loading
async function hideLoading() {
  return new Promise((resolve, reject) => {
    let tl = gsap.timeline()
    tl.to(".loading-text span", {
      y: "200%",
      opacity: 0,
      ease: "power4.inOut",
      duration: 2,
      stagger: 0.2,
    })
    tl.to(".loading-progress", { opacity: 0, ease: "power4.inOut", duration: 2 }, "<")
    tl.to(
      ".loading",
      {
        opacity: 0,
        ease: "power4.inOut",
        onComplete: () => {
          resolve()
        },
      },
      "-=1"
    )
  })
}

function handleMenuSelect(index) {
  state.activeIndex = index
}
// 地图开始动画播放完成
function handleMapPlayComplete() {
  let tl = gsap.timeline({ paused: false })
  let leftCards = gsap.utils.toArray(".left-card")
  let rightCards = gsap.utils.toArray(".right-card")
  let countCards = gsap.utils.toArray(".count-card")
  tl.addLabel("start", 0.5)
  tl.addLabel("menu", 0.5)
  tl.addLabel("card", 1)
  tl.addLabel("countCard", 3)
  tl.to(".m-header", { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" }, "start")
  tl.to(".bottom-tray", { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" }, "start")
  tl.to(
    ".top-menu",
    {
      y: 0,
      opacity: 1,
      duration: 1.5,
      ease: "power4.out",
    },
    "-=1"
  )
  tl.to(".bottom-radar", { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" }, "-=2")
  tl.to(leftCards, { x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out" }, "card")
  tl.to(rightCards, { x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out" }, "card")
  tl.to(
    countCards,
    {
      y: 0,
      opacity: 1,
      stagger: 0.2,
      duration: 1.5,
      ease: "power4.out",
    },
    "card"
    
  )
  showBox(1)
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/home.scss";
.m-header-weather,
.m-header-date {
  span {
    padding-right: 10px;
    color: #c4f3fe;
    font-size: 14px;
  }
}
.top-menu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 40px;
  z-index: 3;
  display: flex;
  justify-content: center;
  .top-menu-mid-space {
    width: 800px;
  }
}
.bottom-radar {
  position: absolute;
  right: 500px;
  bottom: 100px;
  z-index: 3;
}
.main-btn-group {
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 999;
  &.disabled {
    pointer-events: none;
  }
  .btn {
    margin-right: 10px;
  }
}
.bottom-svg-line-left,
.bottom-svg-line-right {
  position: absolute;
  right: 50%;
  width: 721px;
  height: 57px;
  margin-right: -5px;
  bottom: -21px;
}
.bottom-svg-line-right {
  transform: scaleX(-1);
  left: 50%;
  right: inherit;
  margin-right: inherit;
  margin-left: -5px;
}
/* 初始化动画开始位置 */
.m-header {
  transform: translateY(-100%);
  opacity: 0;
}
.top-menu {
  transform: translateY(-250%);
  opacity: 0;
}
.count-card {
  transform: translateY(150%);
  opacity: 0;
}
.left-card {
  transform: translateX(-150%);
  opacity: 0;
}
.right-card {
  transform: translateX(150%);
  opacity: 0;
}
.bottom-tray {
  transform: translateY(100%);
  opacity: 0;
}
.bottom-radar {
  transform: translateY(100%);
  opacity: 0;
}
.pos_card_content{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  left: 0;
  top: 0;
  .pos_card_content_table{
    position: relative;
    z-index: 1;
    position: fixed;
    pointer-events: all;
    width: 1700px;
    height: 664px;
    background: url("../../assets/images/table_box.png") no-repeat;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .table_title{
      height: 80px;
      font-size: 24px;
      font-family: "Douyu";
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      letter-spacing: 2px;
      padding-left: 37px;
      padding-top: 31px;
      box-sizing: border-box;
      .close{
        width: 68px;
        cursor: pointer;
      }
    }
  }
}
.table_container{
  padding: 10px 30px;
  .table_tabs{

    display: flex;
    .table_tabs_item{
      font-weight: 400;
      font-size: 16px;
      color: #C3E4FF;
      line-height: 22px;
      margin-right: 34px;
      margin-bottom: 31px;
      cursor: pointer;
    }
    .table_tabs_item-avtive{
      font-weight: 600;
      font-size: 16px;
      color: #4EDFFF;
      line-height: 22px;
      position: relative;
    }
    .table_tabs_item-avtive::after{
      content: "";
      position: absolute;
      width: 97px;
      height: 19px;
      background: url(../../assets/images/tabs_actbg.png);
      background-size: 100% 100%;
      left: 50%;
      bottom: -19px;
      transform: translateX(-50%);
      z-index: 9999;

    }
  }

}
/* 表头样式 */
::v-deep(.el-table--striped) {
  .el-table__body {
    tr.el-table__row--striped {
      background: rgba(51, 92, 171, 0.1) !important;
    }
    tr:not(.el-table__row--striped) {
      background: transparent !important;
    }
  }
}
.paginationClass{
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.pos_canvas_box{
    min-width: 244px;
    height: 160px;
    background: linear-gradient( 180deg, rgba(5,41,98,0.57) 0%, #194891 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(225deg, rgba(75, 145, 248, 1), rgba(87, 154, 255, 0), rgba(109, 160, 251, 0), rgba(127, 173, 255, 1)) 1 1;
    position: absolute;
    bottom: 118px;
    right: 26%;
    padding: 6px 20px;
    box-sizing: border-box;
    z-index: 999;
    .pos_canvas_box_item{
      display: flex;
      width: 100%;
      .pos_canvas_box_item-label{
        font-weight: 400;
        font-size: 12px;
        color: #A1C2F9;
        line-height: 37px;
        width: 96px;
      }
      .pos_canvas_box_item-value{
        font-weight: normal;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 30px;
        font-family: "Douyu";
        margin-left: 9px;
      }
      .pos_canvas_box_item-unit{
        font-weight: 400;
        font-size: 14px;
        color: #C2DAFF;
        margin-left: 4px;
        // line-height: 37px;
        font-family: "PingFangSC";
      }

    }
  }
</style>
